●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Full landing/marketing page: top navigation, hero, features, tournament types, testimonials and footer.
- Latest tournaments list rendered from an in-memory collection (foreach) with status badges and action buttons.
- Contact form implemented with EditForm, DataAnnotationsValidator and ValidationMessage; client-side model validation via DataAnnotations.
- Profile page (Padel) implemented with EditForm, InputFile avatar preview (base64), InputText/InputTextArea/InputSelect/InputRadioGroup/InputNumber and validation messages.
- Small interactive UI state: profile dropdown toggle, mock login state, contact submitted and save success flags.
## Key components
- EditForm, DataAnnotationsValidator, ValidationMessage
- InputText, InputTextArea, InputSelect, InputRadioGroup, InputRadio, InputNumber
- InputFile with file read to base64 (avatar preview)
- @bind-Value bindings, foreach rendering of TournamentModel/TestimonialModel
- NavigationManager for page navigation and simple mock logout
## How it works
- Page data is populated in OnInitialized using in-memory lists (latestTournaments, testimonials).
- Forms use model binding (@bind-Value) and DataAnnotations on ContactFormModel and PadelProfileModel for validation.
- EditForm OnValidSubmit handlers set local flags (contactSubmitted, saveSuccess) to show success UI; no API calls are performed.
- InputFile handler reads the selected file stream into a MemoryStream then encodes a data URL for immediate preview.
- UI state (isLoggedIn, showProfileMenu) controls conditional rendering of profile menu and login button.
## Styling
- Tailwind CSS utility classes are used throughout (flex, grid, gap-*, px-*, text-slate-*, rounded-*, sm:/md: breakpoints).
- Dark theme uses slate/indigo/emerald color utilities and responsive grid layouts (md:grid-cols-2, lg:grid-cols-3).
- Icons use Font Awesome classes (fas / fab) in markup — icon set must be included in the host app.
## Reuse steps
1. Add the models (TournamentModel, TestimonialModel, ContactFormModel, PadelProfileModel) to the project and import namespaces where needed.
2. Include Tailwind CSS in the Blazor project or adjust classes to project's CSS system; add Font Awesome or swap icons.
3. Ensure Microsoft.AspNetCore.Components.Forms is available (InputFile, EditForm are built-in for Blazor).
4. Wire real services: replace mock lists and handlers with API calls (inject HttpClient or a service) and handle errors.
5. Implement server-side image upload or blob storage instead of base64 data URLs for production avatars.
6. Register routes (/organize-landing, /profile) and secure profile pages with authentication middleware when required.
## Limitations & next steps
- Mock data: lists and form handlers are local only; persistence and server validation are not implemented.
- Authentication and authorization are mocked; integrate Identity or an auth provider for real user flows.
- InputFile uses client-side base64 preview; large files need server-side upload and size/type checks.
- Accessibility and localization are minimal; add ARIA attributes, focus management and resource files as needed.
- Add paging/filtering for the tournaments grid and replace static icons with SVGs if needed for branding.